@use "variables";
.form-control:focus,.form-check-input:focus{
    box-shadow: 0 0 0 0.25rem rgba(var(--panel-secondary), 0.25);
border-color: rgba(var(--panel-secondary), 0.25);
}

.forms{

    .card{
        background-color: rgba(var(--bs-body-bg),.5);
        background-image: url("$resImage/pattern.png");
        backdrop-filter: blur(4px);
        box-shadow: -2px -2px 7px var(--panel-primary), 2px 2px 7px var(--panel-secondary);
    }
}

main{
    .card{
        background-color:  var(--panel-lighter);
        border: 0;
        .card-header{
            background: #00000011;
            border: 0;
            text-align: center;
        }

        .card-footer{
            .btn{
                min-width: 200px;
                width: 10%;
                display: block;
                margin: auto;
            }
        }
    }
}



.form-check-input:checked,.btn-primary{
    background-color: var(--panel-primary);
    border-color: var(--panel-primary);
}

.btn-primary:hover{
    background-color:var(--panel-secondary);
}

a,a:visited{
    color: white;
    &:hover{
        color: var(--panel-primary);
    }
}

.pagination{
    --bs-pagination-active-bg:var(--panel-primary) ;
    --bs-pagination-active-border-color: var(--panel-background);
    --bs-pagination-color: var(--panel-primary,var(--panel-secondary));
    --bs-pagination-hover-color:rgba(var(--panel-primary),.2);
}

.v-toast__item{
    width: 275px ;
}
